<template>
	<div class="body-hp" style="overflow-y: auto" id="body-hp">
		<HeaDer></HeaDer>

		<div class="flex" style="background-color: #f8f9fb; width: 100%; padding: 10rem">
			<div class="flex space-between" style="width: 1532rem; margin-left: auto; margin-right: auto">
				<div class="flex">
					<div
						style="font-size: 18rem;color: #000;margin-right: 10rem;display: flex;justify-content: center;align-items: center;">
						当前位置:
					</div>
					<div style="display: flex; justify-content: center; align-items: center">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item to="/hp">首页</el-breadcrumb-item>
							<el-breadcrumb-item> 企业端</el-breadcrumb-item>
							<el-breadcrumb-item>入驻企业列表</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
				</div>
				<div>
					<div class="demo-input-suffix" style="display: flex;">
						<el-input size="mini" clearable placeholder="请输入企业名称关键字查询" v-model="dName">
						</el-input>
						<el-button size="mini" type="success" @click="handleQuery"
							style="margin-left: 6rem;">搜索</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="top-content-pl body-pl">
			<div class="row-pl" style="background-color:#fff">
				<div class="tabs-pl">
					<div class="left-pl">企业性质：</div>
					<ul class="right-pl right1">
						<li @click="tabs1('-1', $event)" class="on">不限</li>
						<li v-for="(item, index) in  dict.type.enterprise_nature" @click="tabs1(index, $event)"
							:key="index">{{ item.label }}</li>
					</ul>
				</div>
				<div class="tabs-pl">
					<div class="left-pl">行业类别：</div>
					<ul class="right-pl right2">
						<li @click="tabs2('-1', $event)" class="on">不限</li>
						<li v-for="(item, index) in dict.type.customer_industry" @click="tabs2(index, $event)"
							:key="index">
							{{ item.label }}</li>
					</ul>
					<div class="btns-pl" @click="more_list($event)">
						<span style="color:#1890ff;">更多</span>
						<i style="color:#1890ff;">收起</i>
					</div>
				</div>
				<!-- <div class="tabs-pl">
					<div class="left-pl">地域分区：</div>
					<ul class="right-pl right3">
						<li v-for="(item, index) in tabs3_pl" :class="index == 0 ? 'on' : ''" @click="tabs3($event)"
							:key="index">
							<span>{{ item.name }}</span>
							<span>({{ item.num }})</span>
						</li>
					</ul>
					<div class="btns-pl" @click="more_pl($event)">
						<span>更多</span>
						<i>收起</i>
					</div>
				</div> -->
			</div>
		</div>
		<div v-for="item in deptList" :key="item.message" class="flex" v-if="deptList.length > 0" style="
        background-color: #f8f9fb;
        width: 1532rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20rem;
        padding: 20rem;
      ">
			<img @click="goDeptDetail(item.deptId)" width="192rem" height="92rem" :src='item.url'
				v-if="item.url != null && item.url != ''" />
			<img @click="goDeptDetail(item.deptId)" width="192rem" height="92rem"
				:src='require("../../assets/images/pl-img_12.jpg")' v-else />
			<div style="margin-left:20rem;width:1200rem;">
				<div class="flex" style="">
					<div
						style="font-size:16rem;background-color:#BF0713;color:#fff;margin-right:20rem;padding:0rem 5rem;display: flex;align-items: center;">
						{{ formatterType(item.nature) }}
					</div>
					<el-link :underline="false" @click="goDeptDetail(item.deptId)">{{ item.deptName }}</el-link>
				</div>
				<div
					style="margin-top:20rem;overflow-y: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
					经营范围：{{ item.businessScope }}</div>
				<div style="display: flex;align-items: center;margin-top:20rem">
					<i class="el-icon-location-outline">{{ item.address }}</i>
				</div>
			</div>
		</div>
		<el-empty :image-size="200" v-if="deptList.length == 0 && isLoaded"></el-empty>
		<div class="forth">
			<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize" @pagination="getList" />
		</div>
		<FooTer></FooTer>

	</div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { listDeptAll } from "@/api/system/dept";
export default {
	name: "body-hp",
	dicts: ['enterprise_nature', 'customer_industry'],
	data() {
		return {
			isLoaded: false,
			deptList: [],
			dName: "",
			tabs1_pl: [],
			tabs2_pl: [],
			tabs3_pl: [],
			queryParams: {
				pageNum: 1,
				pageSize: 5,
				deptName: null,
				companyType: null,
				nature: null,
				area: null,
				businessScope: null,
				industry: null,
				businessCode: "enterprise_logo",
				address: null,
			},
			total: 0,
			newNature: "",
			newType: ""
		};
	},
	components: {
		HeaDer,
		FooTer,

	},
	methods: {
		getList() {
			this.queryParams.companyType = "0";
			listDeptAll(this.queryParams).then(response => {
				this.deptList = response.rows;
				this.total = response.total;
			});
		},
		goDeptDetail(deptId) {
			this.$router.push("/enrollmentdetail/" + deptId);
		},
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.queryParams.companyType = "0";
			this.queryParams.nature = this.newNature;
			this.queryParams.industry = this.newType;
			this.queryParams.deptName = this.dName;
			listDeptAll(this.queryParams).then(response => {
				this.deptList = response.rows;
				this.total = response.total;
			});
		},
		formatterType(value) {
			var type = "";
			this.dict.type.enterprise_nature.forEach(item => {
				if (item.value == value)
					type = item.label;
			});
			return type;
		},
		tabs1(index, e) {
			if (index != -1) {
				this.newNature = index;
				this.queryParams.nature = index;
			} else {
				this.newNature = "";
				this.queryParams.nature = "";
			}
			if (this.newType != -1) {
				this.queryParams.industry = this.newType;
			} else {
				this.queryParams.industry = "";
			}
			this.queryParams.companyType = "0";
			this.queryParams.deptName = this.dName;
			listDeptAll(this.queryParams).then(response => {
				this.deptList = [];
				this.deptList = response.rows;
				this.total = response.total;
			});
			var tabs1 = e.target.parentNode.childNodes;
			for (let i = 0; i < tabs1.length; i++) {
				tabs1[i].classList.remove("on");
			}
			e.target.className = "on";
		},
		tabs2(index, e) {
			if (index != -1) {
				this.newType = index;
				this.queryParams.industry = index;
			} else {
				this.newType = "";
				this.queryParams.industry = "";
			}
			if (this.newNature != -1) {
				this.queryParams.nature = this.newNature;
			} else {
				this.queryParams.nature = "";
			}
			this.queryParams.companyType = "0";
			this.queryParams.deptName = this.dName;
			listDeptAll(this.queryParams).then(response => {
				this.deptList = [];
				this.deptList = response.rows;
				this.total = response.total;
			});
			var tabs2 = e.target.parentNode.childNodes;
			for (let i = 0; i < tabs2.length; i++) {
				tabs2[i].classList.remove("on");
			}
			e.target.className = "on";
		},
		tabs3(e) {
			var tabs3 = e.target.parentNode.childNodes;
			for (let i = 0; i < tabs3.length; i++) {
				tabs3[i].classList.remove("on");
			}
			e.target.className = "on";
		},
		more_pl(e) {
			if (e.target.className === "btns-pl") {
				e.target.className = "btns-pl on"
			} else {
				e.target.className = "btns-pl"
			}
			// console.log(i);
			var more_pl = document.querySelector('.right3');
			console.log(more_pl.className);
			if (more_pl.className === "right-pl right3") {
				more_pl.className = "right-pl right3 on"
			} else {
				more_pl.className = "right-pl right3"
			}
		},
		more_list(e) {
			if (e.target.className === "btns-pl") {
				e.target.className = "btns-pl on"
			} else {
				e.target.className = "btns-pl"
			}
			// console.log(i);
			var more_pl = document.querySelector('.right2');
			console.log(more_pl.className);
			if (more_pl.className === "right-pl right2") {
				more_pl.className = "right-pl right2 on"
			} else {
				more_pl.className = "right-pl right2"
			}
		},
		route(e) {
			this.$router.push(e.url)
		},
	},
	created() {
		this.getList();
	},
	mounted() {
		setTimeout(() => {
			this.isLoaded = true;
		}, 800);
	}
};
</script>

<style lang="scss" scoped>
::v-deep .el-radio-button:first-child .el-radio-button__inner {
	border: none;
}

::v-deep .el-radio-button__inner {
	border: none;
}

.flex {
	display: flex;
}

.space-between {
	display: flex;
	justify-content: space-between;
}

.forth {
	width: 1532rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30rem;
	margin-top: 20rem
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
	color: #35a266;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #35a266;
}

/* 头尾公共样式 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote，th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

/* 回到顶部 end*/
.body-hp {
	height: 100%;
	width: 100%;
	/* font: 14rem arial; */
	font-size: 14rem;
	font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
	color: #676767;
}

.top-content-pl {
	width: 100%;
}

.top-content-pl>.row-pl {
	box-shadow: 0 0 6rem 0 rgba(0, 0, 0, .1);
	padding: 30rem;
	margin-top: 28rem;
	margin-bottom: 30rem;
}

.top-content-pl>.row-pl>.tabs-pl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 18rem;
}

.top-content-pl>.row-pl>.tabs-pl:last-child {
	margin-bottom: 0rem;
}

.top-content-pl>.row-pl>.tabs-pl>.left-pl {
	white-space: nowrap;
	padding-top: 4rem;
}

.top-content-pl>.row-pl>.tabs-pl>.right-pl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

.top-content-pl>.row-pl>.tabs-pl>.right-pl {
	height: 30rem;
	overflow: hidden;
}

.top-content-pl>.row-pl>.tabs-pl>.right-pl.on {
	height: auto;
	overflow: auto;
}

.top-content-pl>.row-pl>.tabs-pl>.right-pl>li {
	margin-right: 40rem;
	padding: 3rem 8rem;
	cursor: pointer;
	margin-bottom: 5rem;
}

.top-content-pl>.row-pl>.tabs-pl>.right-pl>li.on {
	color: #12ba5e;
	background-color: #e9fff3;
}

.top-content-pl>.row-pl>.tabs-pl>.right-pl>li>span {
	pointer-events: none;
}

.top-content-pl>.row-pl>.tabs-pl>.btns-pl {
	padding-right: 22rem;
	background: url(../../assets/images/down.png) no-repeat scroll;
	background-position: right center;
	cursor: pointer;
	white-space: nowrap;
	height: 24rem;
}

.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on {
	padding-right: 22rem;
	background: url(../../assets/images/up.png) no-repeat scroll;
	background-position: right center;
}

.top-content-pl>.row-pl>.tabs-pl>.btns-pl>i {
	font-style: normal;
	display: none;
	pointer-events: none;
}

.top-content-pl>.row-pl>.tabs-pl>.btns-pl>span {
	pointer-events: none;
}

.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on>span {
	display: none;
}

.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on>i {
	font-style: normal;
	display: block;
}

.body-pl {
	/* font: 14rem arial; */
	font-size: 16rem;
	font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
	color: #676767;
}

.row-pl {
	width: 1532rem;
	margin: 0 auto;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
	border: none;
}

::v-deep .el-radio-button__inner {
	border: none;
}
</style>
